<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <ul v-if="showrecommendedSaleList">
      <li class="item border-bottom" v-for="(item,index) in recommendedSaleList" :key="index">
        <img class="item-img" :src="item.imgUrl" alt="img" />
        <div class="item-info">
          <p class="item-title ellipsis">{{item.title}}</p>
          <p class="item-desc ellipsis">{{item.desc}}</p>
          <button class="item-button" @click="JumpDetail(item.id)">查看详情</button>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
import { mapState } from "vuex";
//    function fresh(){
//         if(location.href.indexOf("?reload=true")<0){
//             location.href+="?reload=true";
//         }
//     }
//     setTimeout("fresh()",50);
//页面只刷新一次
// window.onload = function() {
//   if (location.href.indexOf("?xyz=") < 0) {
//     location.href = location.href + "?xyz=" + Math.random();
//   }
// };
export default {
  data() {
    return {
      lastCity: "",
      recommendedSaleList: []
    };
  },
  created() {
    this.lastCity = this.city;
    this.getRecommendList();
  },
  methods: {
    getRecommendList() {
      axios.get("/api/index.json?city2=" + this.city).then(res => {
        this.recommendedSaleList = res.data.data.recommendedSaleList;
      });
    },
    JumpDetail(obj){
        this.$router.push({
          path:'/detail',
          query:{
            id:obj
          }
        })
    }
  },
  // 计算属性
  computed: {
    showrecommendedSaleList() {
      return this.recommendedSaleList.length;
    },
    ...mapState(["city"])
  },
  mounted() {},
  activated() {
    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getRecommendList();
    }
  },
};
</script>
<style scoped>
.recommend-title {
  margin-top: 4px;
  line-height: 25px;
  background: #eee;
  text-indent: 8px;
}
.item {
  width: 100%;
  overflow: hidden;
  display: flex;
}
.item .item-img {
  overflow: hidden;
  width: 24.5%;
  height: 24.5%;
  padding: 5px;
}
.item .item-info {
  width: 100%;
  flex: 1;
  padding: 5px;
}
.item .item-info .item-title {
  /* width:90%; */
  padding: 2px;
  font-size: 16px;
  line-height: 30px;
}
.item .item-info .item-desc {
  /* width: 90%; */
  width: 250px;
  line-height: 15px;
  color: rgb(141, 140, 140);
  margin-bottom: 0 0 5px 5px;
}
.item .item-info .item-button {
  margin-top: 10px;
  background: #f0920e;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid #be893f;
  color: #ffffff;
  line-height: 18px;
}
</style>